<!doctype html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <title>对比统计</title>

    <link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
    <link rel="stylesheet" href="/css/vendor/cmp-controls.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="/css/ecalendar.css">
    <link href="/css/vendor/comparative-statistics.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>

    <style>

    </style>

</head>

<body>
<main>
    <ul class="nav-bar">
        <li class="button" select>里程/架次对比</li>
        <li class="button">飞机类型对比</li>
    </ul>

    <div id="flight-comparative" class="content-wrap">
        <div class="filter-wrap">
            <p class="title">最近:</p>
            <input type='radio' name='flight-date' value='year' id='year0' style='margin-left: 55px;' checked><label
                    for='year0'>按年</label>
            <input type='radio' name='flight-date' value='month' id='month0'><label for='month0'>按月</label>
            <input type='radio' name='flight-date' value='day' id='day0'><label for='day0'>按日</label>

            <p class="title" style="margin-left: 90px;">飞机类型:</p>
            <select id="plane-model">
                <option value="0">请选择</option>
                {% for id,name in planeModels %}
                    <option value="{{ id }}">{{ name }}</option>
                {% endfor %}
            </select>

            <p class='clear-btn button' onClick='resetParamFirstPage()'>重 置</p>
            <p class="title time-interval">时间区间:</p>

            <input type="e-date" value="开 始" id="time-start">
            <img class="toggle" src="/images/statistics/comparative-statistics-toggle.png">
            <input type="e-date" value="结 束" id="time-end">
            <img class="toggle" src="/images/statistics/comparative-statistics-toggle.png">
        </div>

        <div class="canvas-wrap">
            <canvas id='flight-chart'></canvas>
            <img class="move-left-btn button" src="/images/statistics/comparative-statistics-pre.png">
            <img class="move-right-btn button" src="/images/statistics/comparative-statistics-pre.png">

            <table>
                <tr>
                    <td><label class="miles"></label>里程</td>
                    <td><label class="flight-cnt"></label>架次</td>
                </tr>
            </table>
        </div>
    </div>

    <div id="drone-type-comparative" class="content-wrap remove">
        <div class="filter-wrap">
            <p class="title">最近:</p>
            <input type='radio' name='drone-type-date' value='year' id='year1' style='margin-left: 55px;' checked><label
                    for='year1'>按年</label>
            <input type='radio' name='drone-type-date' value='month' id='month1'><label for='month1'>按月</label>
            <input type='radio' name='drone-type-date' value='day' id='day1'><label for='day1'>按日</label>

            <input type='radio' name='flight-count-or-miles' value='count' id='filter-flight-count' checked
                   style='margin-left: 80px;'><label for='filter-flight-count'>按架次</label>
            <input type='radio' name='flight-count-or-miles' value='miles' id='filter-flight-miles'><label
                    for='filter-flight-miles'>按里程</label>

            <p class='clear-btn button' onClick='resetParamSecondPage()'>重 置</p>
            <p class="title time-interval">时间区间:</p>

            <input type="e-date" value="开 始" id="time-start-second">
            <img class="toggle" src="/images/statistics/comparative-statistics-toggle.png">
            <input type="e-date" value="结 束" id="time-end-second">
            <img class="toggle" src="/images/statistics/comparative-statistics-toggle.png">
        </div>

        <div class="canvas-wrap">
            <canvas id='drone-type-chart'></canvas>
            <img class="move-left-btn button" src="/images/statistics/comparative-statistics-pre.png">
            <img class="move-right-btn button" src="/images/statistics/comparative-statistics-pre.png">
        </div>

        <div class="drone-wrap">
            <ul id="drone-type-comparative-drone-list">
                <li name="P300" checked>
                    <div class="item p300">
                        <div class="title">P300</div>
                        <img src="/images/statistics/p300.jpg">
                    </div>
                </li>
                <li name="F300" checked>
                    <div class="item f300">
                        <div class="title">F300</div>
                        <img src="/images/statistics/f300.png">
                    </div>
                </li>
                <li name="F200" checked>
                    <div class="item f200">
                        <div class="title">F200</div>
                        <img src="/images/statistics/f200.png">
                    </div>
                </li>
                <li name="F2000" checked>
                    <div class="item f2000">
                        <div class="title">F2000</div>
                        <img src="/images/statistics/f2000.jpg">
                    </div>
                </li>
                <li name="F1000" checked>
                    <div class="item f1000">
                        <div class="title">F1000</div>
                        <img src="/images/statistics/f1000.png">
                    </div>
                </li>
                <li name="D200" checked>
                    <div class="item d200">
                        <div class="title">D200</div>
                        <img src="/images/statistics/d200.png">
                    </div>
                </li>
                <li name="Phantom4" checked>
                    <div class="item phantom4">
                        <div class="title">D1000</div>
                        <img src="/images/statistics/phantom4.png">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</main>
<div style="display: none">
    <div id="planeModelStr">{{ planeModelsStr }}</div>
</div>
</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/Ecalendar.jquery.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/cmp-controls.js"></script>
<script src="/js/vendor/chart-polygon-flight.js" type="text/javascript"></script>
<script src="/js/vendor/comparative-statistics.js"></script>


<script>
    //重置参数
    function resetParamFirstPage() {
        $("#plane-model").val(0);
        $("#year0").get(0).checked=true;
        $("#plane-model").val(0);
        $("#time-start").val("开 始");
        $("#time-end").val("结 束");
        DataStatProxy.requestStatFirst();
    }

    function resetParamSecondPage() {
        $("#time-start-second").val("开 始");
        $("#time-end-second").val("结 束");
        $("#year1").get(0).checked=true;
        $("#filter-flight-count").get(0).checked=true;
        DataStatProxy.requestStatSecond();
    }


    var DataStatProxy = {
        planeArray: false,

        flightChart: false,
        droneTypeChart: false,
        curFirstPageData: false,
        curFirstPageMonthData: false,
        curFirstPageDayData: false,
        curFirstPageYearData: false,

        curSecondPageData: false,
        curSecondChartList:false,
        init: function () {
            this.planeArray = eval("(" + $("#planeModelStr").text() + ")");
            //初始化视图
            this.flightChart = new PolygonChart();
            this.flightChart.cfg.windowWidthOffset = 120;
            this.flightChart.cfg.windowHeightOffset = 230;
            this.flightChart.cfg.verUnitName = "(单位: 架次)";
            this.flightChart.init("flight-chart");

            this.droneTypeChart = new PolygonChart();
            this.droneTypeChart.cfg.verUnitName = "(单位: 架次)";
            this.droneTypeChart.init("drone-type-chart");

            /********* 第一页的参数绑定 ****************/

            $("#plane-model").change(function () {
                DataStatProxy.requestStatFirst();
            });

            $("input[name=flight-date]").change(function () {

                if (!DataStatProxy.curFirstPageData) {
                    DataStatProxy.requestStatFirst();
                } else {
                    DataStatProxy.updateStatFirst();
                }
            });
            $("#time-start").ECalendar({
                type: "date",   //模式，time: 带时间选择; date: 不带时间选择;
                stamp: false,   //是否转成时间戳，默认true;
                offset: [0, 4],   //弹框手动偏移量;
                format: "yyyy-MM-dd",   //时间格式 默认 yyyy-mm-dd hh:ii;
                skin: "#9dabbd",   //皮肤颜色，默认随机，可选值：0-8,或者直接标注颜色值;
                step: 10,   //选择时间分钟的精确度;
                callback: function () {
                    DataStatProxy.requestStatFirst();
                }
            });
            $("#time-end").ECalendar({
                type: "date",   //模式，time: 带时间选择; date: 不带时间选择;
                stamp: false,   //是否转成时间戳，默认true;
                offset: [0, 4],   //弹框手动偏移量;
                format: "yyyy-MM-dd",   //时间格式 默认 yyyy-mm-dd hh:ii;
                skin: "#9dabbd",   //皮肤颜色，默认随机，可选值：0-8,或者直接标注颜色值;
                step: 10,   //选择时间分钟的精确度;
                callback: function () {
                    DataStatProxy.requestStatFirst();
                }
            });


            /************ 第二页的参数绑定 ******************/

            $("#time-start-second").ECalendar({
                type: "date",   //模式，time: 带时间选择; date: 不带时间选择;
                stamp: false,   //是否转成时间戳，默认true;
                offset: [0, 4],   //弹框手动偏移量;
                format: "yyyy-MM-dd",   //时间格式 默认 yyyy-mm-dd hh:ii;
                skin: "#9dabbd",   //皮肤颜色，默认随机，可选值：0-8,或者直接标注颜色值;
                step: 10,   //选择时间分钟的精确度;
                callback: function () {
                    DataStatProxy.requestStatSecond();
                }
            });
            $("#time-end-second").ECalendar({
                type: "date",   //模式，time: 带时间选择; date: 不带时间选择;
                stamp: false,   //是否转成时间戳，默认true;
                offset: [0, 4],   //弹框手动偏移量;
                format: "yyyy-MM-dd",   //时间格式 默认 yyyy-mm-dd hh:ii;
                skin: "#9dabbd",   //皮肤颜色，默认随机，可选值：0-8,或者直接标注颜色值;
                step: 10,   //选择时间分钟的精确度;
                callback: function () {
                    DataStatProxy.requestStatSecond();
                }
            });

            $("input[name=drone-type-date]").change(function () {
                DataStatProxy.requestOrUpdateSecond();
            });
            $("input[name=flight-count-or-miles]").change(function () {
                var value=$(this).val();
                if(value=="count"){
                    DataStatProxy.droneTypeChart.cfg.verUnitName = "(单位: 架次)";
                }else{
                    DataStatProxy.droneTypeChart.cfg.verUnitName = "(单位: KM)";
                }
                DataStatProxy.requestOrUpdateSecond();

            });

            // 飞机类型对比 飞机类型改变
            comparativeStatisticsM.droneTypeComparativeDroneTypeChanged = function (checkedDroneList) {

                DataStatProxy.requestOrUpdateSecond();
            };

            this.requestStatFirst();
            this.requestStatSecond();
        },
        getPlaneId: function (name) {
            for (var item in this.planeArray) {
                var toName = this.planeArray[item];
                if(toName.toLowerCase().indexOf("phantom")>=0){
                    toName="phantom4";
                }
                if (name.toLowerCase()==toName.toLowerCase()) {
                    return parseInt(item);
                }

            }
            return 0;
        },
        requestOrUpdateSecond: function () {
            if (!DataStatProxy.curSecondPageData) {
                DataStatProxy.requestStatSecond();
            } else {
                DataStatProxy.updateStatSecond();
            }
        },
        requestStatSecond: function () {
            var param = new Object();
            param['showSpace'] = "day";
            var timeStart = $("#time-start-second").val();
            var timeEnd = $("#time-end-second").val();
            if (timeStart != "开 始") {
                param['startDate'] = timeStart;
            }
            if (timeEnd != "结 束") {
                param['endDate'] = timeEnd;
            }
            loadingView.show();
            feimaPost("/monitor/searchSysLine", param, function (result) {
                loadingView.remove();
                var data = result.message;

                DataStatProxy.curSecondPageData = DataStatProxy._groupSecondData(data);
                DataStatProxy.updateStatSecond();
            });
        },
        updateStatSecond: function () {
            var checkedDroneList = comparativeStatisticsM.droneTypeComparativeDroneCheckedList();
            var pList = new Array();
            var charList = false;
            var type = $("input[name=drone-type-date]:checked").val();
            var filterType = $("input[name=flight-count-or-miles]:checked").val();

            var emptyArray=new Array();

            for (var i = 0; i < checkedDroneList.length; i++) {
                var item = checkedDroneList[i];
                var planeId = this.getPlaneId(item.name);
                var result = this.curSecondPageData[planeId];
                if(result){
                    var resultFilter=result;
                    if (type == "month") {
                        resultFilter = DataStatProxy._getGroupStatDataWithTime(result,7);
                    }
                    if (type == "year") {
                        resultFilter = DataStatProxy._getGroupStatDataWithTime(result,4);
                    }
                    if (!charList) {

                        charList = resultFilter['date'];
                        DataStatProxy.curSecondChartList=charList;
                    }
                    var targetData=null;
                    if(filterType=="count"){
                        targetData=resultFilter['planeCount'];
                    }else{
                        targetData=resultFilter['milCount'];
                    }
                    var p = {data:targetData, fillColor: item.fillColor, strokeColor: item.strokeColor};
                    pList.push(p);
                }else{
                    emptyArray.push(item);
                }
            }

            this.droneTypeChart.update(DataStatProxy.curSecondChartList, pList);
        },

        _groupSecondData: function (data) {
            var result = new Object();
            var planeArray = data.planeModels;
            var useArray = eval("(" + data.allUseTime + ")");
            var milArray = eval("(" + data.allMilTimes + ")");

            for (var i = 0; i < planeArray.length; i++) {
                var planeId = planeArray[i];
                var planeResult = new Object();
                var itemLabelArray = new Array();
                var itemUseArray = new Array();
                var itemMilArray = new Array();
                var itemList = useArray[planeId];
                for (var itemLabel in itemList) {
                    itemLabelArray.push(itemLabel);
                    itemUseArray.push(itemList[itemLabel]);
                }
                itemList = milArray[planeId];
                for (var itemLabel in itemList) {
                    itemMilArray.push(itemList[itemLabel]);
                }

                planeResult['date'] = itemLabelArray;
                planeResult['planeCount'] = itemUseArray;
                planeResult['milCount'] = itemMilArray;
                result[planeId] = planeResult;
            }
            return result;
        },
        updateStatFirst: function () {

            var data = null;
            var type = $("input[name=flight-date]:checked").val();
            if (type == "month") {
                data = DataStatProxy.curFirstPageMonthData;
            }
            if (type == "year") {
                data = DataStatProxy.curFirstPageYearData;
            }
            if (type == "day") {
                data = DataStatProxy.curFirstPageDayData;
            }
            var milesData = data["milCount"];
            var flightCntData = data["planeCount"];
            var dateData = data["date"];

            var paramList = [{
                data: milesData,
                fillColor: "rgba(139, 124, 225, 0.5)",
                strokeColor: "rgb(139, 124, 225)"
            },
                {data: flightCntData, fillColor: "rgba(234, 65, 72, 0.5)", strokeColor: "rgb(234, 65, 72)"}];
            this.flightChart.update(dateData, paramList);

        },
        //请求第一页
        requestStatFirst: function () {
            var param = new Object();
            var planeModel = $("#plane-model").val();
            if (planeModel != -1) {
                param["planeModel"] = planeModel;
            }
            param['showSpace'] = "day";
            var timeStart = $("#time-start").val();
            var timeEnd = $("#time-end").val();
            if (timeStart != "开 始") {
                param['startDate'] = timeStart;
            }
            if (timeEnd != "结 束") {
                param['endDate'] = timeEnd;
            }
            loadingView.show();
            feimaPost("/monitor/searchSysLine", param, function (result) {
                loadingView.remove();
                var data = result.message;

                var charArray = eval("(" + data.chartDate + ")");
                var useArray = eval("(" + data.useTime + ")");
                var milArray = eval("(" + data.milTimes + ")");
                DataStatProxy.curFirstPageData = data;
                DataStatProxy.curFirstPageDayData = new Object();
                DataStatProxy.curFirstPageDayData["date"] = charArray;
                DataStatProxy.curFirstPageDayData["planeCount"] = useArray;
                DataStatProxy.curFirstPageDayData["milCount"] = milArray;
                DataStatProxy.curFirstPageYearData = DataStatProxy._getGroupStatDataWithTime(DataStatProxy.curFirstPageDayData, 4);
                DataStatProxy.curFirstPageMonthData = DataStatProxy._getGroupStatDataWithTime(DataStatProxy.curFirstPageDayData, 7);
                DataStatProxy.updateStatFirst();
            });
        },

        _getGroupStatDataWithTime: function (data, subLength) {
            if(data){
                var dataLabels = data['date'];
                var milesData = data['milCount'];
                var flightCntData = data['planeCount'];
                var monthArray = new Array();
                var count = 0;
                for (var i = 0; i < dataLabels.length; i++) {
                    var label = dataLabels[i].substr(0, subLength);
                    if (!monthArray[label]) {
                        count++;
                        monthArray[label] = {miles: 0, flights: 0};
                    }
                    if (monthArray[label]) {
                        if(milesData&&milesData[i]){
                            monthArray[label]['miles'] += milesData[i];
                        }
                        if(flightCntData&&flightCntData[i]){
                            monthArray[label]['flights'] += flightCntData[i];
                        }


                    }
                }
                var miles = new Array();
                var planeCount = new Array();
                var labels = new Array();

                miles.push(0);
                planeCount.push(0);
                labels.push("");
                for (var item in monthArray) {
                    labels.push(item);
                    miles.push(monthArray[item]['miles']);
                    planeCount.push(monthArray[item]['flights']);
                }
                var result = new Object();
                result['date'] = labels;
                result['milCount'] = miles;
                result['planeCount'] = planeCount;
                return result;
            }
            return null;
        }
    }

    $(function () {
        DataStatProxy.init();
    });


</script>

</html>